// 获取card数组
// querySelectorAll:返回指定选择器组匹配的文档中的元素列表，使用深度优先的先序遍历
const cards = document.querySelectorAll('.card');
console.log(cards);

// 添加点击事件监听器
cards.forEach((item) => {
  item.addEventListener('click', () => {
    // 当点击该卡片的时候，添加或删除active的样式
    // item.classList.toggle('active');
    // 先把所有卡片的样式清掉，再给当前元素加上
    removeActiveClass();
    item.classList.add('active');
  });
});

// 清掉所有卡片的选中样式
const removeActiveClass = () => {
  cards.forEach((card) => {
    card.classList.remove('active');
  });
};
